<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="JobListPage">
        <div class="search-pad">
            <div class="search-text">
                <input type="text" placeholder="实习生招聘">
                <img src="../statics/icons/search.png" alt="">
            </div>
        </div>
        <div class="job-filter-pad">
            <ul class="filter-type">
                <li>
                    <span>工作区域：</span>
                    <ul class="filter-item">
                        <li class="selected">不限</li>
                        <li>苏州</li>
                        <li>无锡</li>
                        <li>常州</li>
                        <li>镇江</li>
                        <li>南京</li>
                    </ul>
                </li>
                <li>
                    <span>工作区域：</span>
                    <ul class="filter-item">
                        <li class="selected">不限</li>
                        <li>苏州</li>
                        <li>无锡</li>
                        <li>常州</li>
                        <li>镇江</li>
                        <li>南京</li>
                    </ul>
                </li>
                <li>
                    <span>工作区域：</span>
                    <ul class="filter-item">
                        <li class="selected">不限</li>
                        <li>苏州</li>
                        <li>无锡</li>
                        <li>常州</li>
                        <li>镇江</li>
                        <li>南京</li>
                    </ul>
                </li>
            </ul>
            <ul class="selected-filter">
                <li>镇江</li>
                <li>镇江</li>
                <li>镇江</li>
            </ul>
        </div>
        <div class="job-list-pad">
            <div class="job-sort-pad">
                <span class="selected">综合排序</span>
                <span>最新发布</span>
                <span>最高薪酬</span>
                <div class="job-count">
                    为您找到<span>1000</span>个符合您要求的职位
                </div>
            </div>

            <div class="job-list">
                <table>
                    <tr>
                        <td class="job-info">
                            <p class="j-name">高薪招聘全栈工程师</p>
                            <p class="j-pay">面议</p>
                            <p class="j-welfare">
                                <span>五险一金</span>
                                <span>包住</span>
                                <span>双休</span>
                            </p>
                        </td>
                        <td class="job-position">
                            <p>江苏省苏州市苏州工业园区微软中国</p>
                            <p>苏州|本科|不限</p>
                            <p>今天发布</p>
                        </td>
                        <td class="job-request">
                            <button>
                                申请
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td class="job-info">
                            <p class="j-name">高薪招聘全栈工程师</p>
                            <p class="j-pay">面议</p>
                            <p class="j-welfare">
                                <span>五险一金</span>
                                <span>包住</span>
                                <span>双休</span>
                            </p>
                        </td>
                        <td class="job-position">
                            <p>江苏省苏州市苏州工业园区微软中国</p>
                            <p>苏州|本科|不限</p>
                            <p>今天发布</p>
                        </td>
                        <td class="job-request">
                            <button>
                                申请
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td class="job-info">
                            <p class="j-name">高薪招聘全栈工程师</p>
                            <p class="j-pay">面议</p>
                            <p class="j-welfare">
                                <span>五险一金</span>
                                <span>包住</span>
                                <span>双休</span>
                            </p>
                        </td>
                        <td class="job-position">
                            <p>江苏省苏州市苏州工业园区微软中国</p>
                            <p>苏州|本科|不限</p>
                            <p>今天发布</p>
                        </td>
                        <td class="job-request">
                            <button>
                                申请
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td class="job-info">
                            <p class="j-name">高薪招聘全栈工程师</p>
                            <p class="j-pay">面议</p>
                            <p class="j-welfare">
                                <span>五险一金</span>
                                <span>包住</span>
                                <span>双休</span>
                            </p>
                        </td>
                        <td class="job-position">
                            <p>江苏省苏州市苏州工业园区微软中国</p>
                            <p>苏州|本科|不限</p>
                            <p>今天发布</p>
                        </td>
                        <td class="job-request">
                            <button>
                                申请
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td class="job-info">
                            <p class="j-name">高薪招聘全栈工程师</p>
                            <p class="j-pay">面议</p>
                            <p class="j-welfare">
                                <span>五险一金</span>
                                <span>包住</span>
                                <span>双休</span>
                            </p>
                        </td>
                        <td class="job-position">
                            <p>江苏省苏州市苏州工业园区微软中国</p>
                            <p>苏州|本科|不限</p>
                            <p>今天发布</p>
                        </td>
                        <td class="job-request">
                            <button>
                                申请
                            </button>
                        </td>
                    </tr>
                </table>

            </div>
        </div>

    </div>
</body>
<script>

</script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        background-color: #eee;
    }

    .search-pad {
        height: 100px;
        padding-top: 60px;
    }

    .search-pad .search-text {
        width: 1000px;
        height: 40px;
        border: 1px solid #ccc;
        margin: auto;
        border-radius: 40px;
        text-align: center;
        background-color: #fff;
    }

    .search-pad .search-text input {
        width: 900px;
        height: 38px;
        border: 0 none;
        outline: none;
    }

    .search-pad .search-text img {
        width: 20px;
        height: 20px;
        padding: 10px 20px;
        float: right;
        cursor: pointer;
    }

    .search-pad .search-type {
        width: 1000px;
        margin: auto;
    }

    .search-pad .search-type ul {
        overflow: hidden;
        text-align: center;
        width: 1000px;
        padding-top: 10px;
    }

    .search-pad .search-type ul li {
        list-style: none;
        display: inline-block;
        margin-left: 20px;
        font-size: 13px;
    }

    .job-filter-pad {
        width: 1200px;
        background-color: #fff;
        margin: auto;
        border-radius: 3px;
        padding: 16px;
        font-size: 14px;
        border-radius: 6px;
    }

    .job-filter-pad ul {
        display: inline-block;

    }

    .job-filter-pad .filter-type {
        display: block;
    }

    .job-filter-pad .filter-type>li {
        list-style: none;
        margin-bottom: 10px;
    }

    .job-filter-pad .filter-type>li>span {
        color: #999;
    }

    .job-filter-pad .filter-type li:last-child {
        margin-bottom: 0px;
    }

    .job-filter-pad .filter-type .filter-item>li.selected {
        color: rgb(0, 100, 231)
    }

    .job-filter-pad .filter-type .filter-item>li {
        list-style: none;
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
    }

    .job-filter-pad .selected-filter li {
        display: inline-block;
        list-style: none;
        margin-top: 16px;
        margin-right: 6px;
        border:1px solid orangered;
        background-color: rgb(255, 240, 213);
        padding: 1px 6px;
    }

    .job-list-pad {
        width: 1200px;
        padding: 16px;
        background-color: #fff;
        margin: auto;
        margin-top: 10px;
        border-radius: 6px;
    }

    .job-list-pad .job-sort-pad {
        padding-bottom: 16px;
    }

    .job-list-pad .job-sort-pad>span {
        margin-right: 16px;
        font-size: 14px;
        cursor: pointer;
    }

    .job-list-pad .job-sort-pad>span.selected {
        color: rgb(0, 100, 231);
    }

    .job-list-pad .job-sort-pad .job-count {
        font-size: 14px;
        float: right;
    }

    .job-list-pad .job-sort-pad .job-count span {
        color: rgb(0, 100, 231);
    }

    .job-list table {
        width: 100%;
    }

    .job-list table tr:last-child td {
        border-bottom: 0 none;
    }

    .job-list table tr td {
        border-bottom: 1px solid #ccc;
        padding: 20px 0;
    }

    .job-list .job-info {
        width: 40%;
    }

    .job-list .job-info p {
        margin-bottom: 10px;
    }

    .job-list .job-info .j-name {
        font-size: 18px;
        font-weight: bold;
    }

    .job-list .job-info .j-pay {
        color: rgb(228, 158, 8);
        font-size: 18px;
    }

    .job-list .job-info .j-welfare span {
        font-size: 12px;
        margin-right: 10px;
        background-color: #eee;
        padding: 4px 8px;
        border-radius: 10px;
    }

    .job-list .job-position {
        width: 30%;
    }

    .job-list .job-position p:first-child {
        color: #000;
    }

    .job-list .job-position p {
        font-size: 14px;
        margin-bottom: 10px;
        color: #999;
    }

    .job-list .job-request {
        width: 18%;
    }

    .job-list .job-request button {
        float: right;
        margin-right: 10px;
        height: 30px;
        width: 80px;
        background-color: rgb(0, 100, 231);
        color: #fff;
        border: 0 none;
        border-radius: 30px;
    }
</style>

</html>